<template>
  <view class="project-details container-normal">
    <!-- log -->
    <image
      v-if="detail.project_log"
      class="project-details-log"
      :src="$photo(detail.project_log[0].url)"
    />
    <view class="project-details-container">
      <view class="flex flex-item-center justify-between">
        <view class="project-name">{{ detail.title }}</view>
        <view class="project-price"><span>¥ </span>{{ detail.price }}</view>
      </view>

      <view class="project-details-container-message">
        <image
          src="https://kindoucloud.com:8077/api/mongoFile/previewImage/example/65a79b868253fd140d862ce8"
          mode="widthFix"
        />
      </view>

      <!-- 用户评论-->
      <view class="project-details-container-comment">
        <view class="comment-header flex flex-item-center justify-between">
          <view class="title">用户评价</view>
          <view class="positive-rating">好评率 100% </view>
        </view>
        <view class="comment-body">
          <view
            class="comment-body-item"
            v-for="item of evaluateList"
            :key="item"
          >
            <view class="item-info flex flex-item-center">
              <view class="img flex-shrink-0">
                <u-avatar
                  size="48rpx"
                  :src="$photo(item.evaluate_avatar[0].url)"
                />
              </view>
              <text>{{ item.evaluate_name }}</text>
              <u-rate
                :count="5"
                size="28rpx"
                :value="item.score"
                minCount="0"
                readonly
                active-color="#FFCD2A"
                inactive-color="#b2b2b2"
              ></u-rate>
            </view>
            <view class="item-content">
              {{ item.server_content || "用户未及时作出评价，默认好评。" }}
            </view>
            <view class="item-date">{{
              $u.timeFormat(item.creatorTime, "yyyy.mm.dd hh:MM:ss")
            }}</view>
          </view>
        </view>

        <view
          class="comment-footer flex flex-item-center justify-center"
          @click="
            $jump('/subPages/home/evaluate/evaluate', {
              query: { projectId: detail._id },
            })
          "
        >
          <span>查看全部{{ allNum }}条评论</span>
          <u-icon name="arrow-right" size="12" color="#999"></u-icon>
        </view>
      </view>

      <!-- 详情页底部提交 -->
      <view
        class="project-details-container-submit flex flex-item-center justify-between"
      >
        <view class="flex flex-item-center order-price">
          合计: <span>¥ </span><text>388</text>
        </view>
        <view
          class="submit-btn"
          @click="
            $jump('/subPages/home/technician-list/technician-list', {
              query: { projectId: detail._id },
            })
          "
        >
          去预约
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getModelInfo, getModelList } from "@/api";
import { getSearchFilter } from "@/common/function";
export default {
  data() {
    return {
      detail: {},
      evaluateList: [],
      allNum: 0,
    };
  },
  onLoad({ projectId }) {
    this.getProjectDetailData(projectId);
    this.getCommentData(projectId);
  },
  methods: {
    async getProjectDetailData(id) {
      const { data } = await getModelInfo("65b1d17c0921260197c48a76", id);
      this.detail = data;
    },
    async getCommentData(id) {
      let filter = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ project_id: id }),
      };
      const { data } = await getModelList("65b856b55efd5153ff55cd80", filter);
      this.allNum = data?.list.length;
      this.evaluateList = data?.list.slice(0, 3);
    },
  },
};
</script>

<style lang="scss" scoped>
.project-details {
  min-height: 100vh;
  padding: 0;

  &-log {
    width: 100%;
    height: 332rpx;
  }

  &-container {
    padding: 26rpx 40rpx;
    box-sizing: border-box;

    .project-name {
      font-size: 36rpx;
      font-weight: 800;
      color: #333333;
    }

    .project-price {
      font-size: 42rpx;
      font-weight: 800;
      color: #e20808;

      > span {
        font-size: initial;
      }
    }

    &-message {
      width: 100%;
      margin-top: 20rpx;

      > image {
        width: 100%;
      }
    }

    &-comment {
      .comment-header {
        margin-top: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: 1px solid #e3e3e3;

        .title {
          font-size: 30rpx;
          font-weight: 800;
          color: #333333;
        }

        .positive-rating {
          font-size: 24rpx;
          color: #999999;
        }
      }

      .comment-body {
        &-item {
          padding: 20rpx 18rpx 30rpx 18rpx;
          border-bottom: 1px solid #e3e3e3;
          box-sizing: border-box;

          &:last-child {
            border-bottom: none;
          }

          .item-info {
            margin-bottom: 20rpx;

            .img {
              width: 48rpx;
              height: 48rpx;
              margin-right: 20rpx;
              border-radius: 50%;
            }

            > span {
              font-size: 28rpx;
              font-weight: bold;
              color: #333333;
              margin-right: 42rpx;
            }
          }

          .item-content {
            font-size: 26rpx;
            color: #666666;
            margin-left: 50rpx;
            margin-bottom: 12rpx;
          }

          .item-date {
            font-size: 24rpx;
            color: #999999;
            margin-left: 50rpx;
          }
        }
      }

      .comment-footer {
        margin: 30rpx 0;

        > span {
          font-size: 24rpx;
          color: #999;
          margin-right: 10rpx;
        }
      }
    }

    &-submit {
      margin-top: 70rpx;
      padding-top: 30rpx;
      border-top: 1px solid #e3e3e3;
      box-sizing: border-box;
      padding-bottom: constant(safe-area-inset-bottom) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;

      .order-price {
        color: #999;
        font-size: 26rpx;

        > span {
          color: #e20808;
          font-size: 22rpx;
          margin: 0 10rpx;
        }

        > text {
          color: #e20808;
          font-size: 30rpx;
        }
      }

      .submit-btn {
        width: 260rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #c94117;
        border-radius: 44rpx;
        text-align: center;
        color: #fff;
        font-size: 38rpx;

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style>
